<template>
	<view>
		<view class="post" style="z-index: 100;top:0;position:fixed;width:100%">
			<ul class="df ac bgcf bbf1">
				<block v-for="(item, index) in tab_list" :key="index">
					<li class="df ac jc h44 w50 tabsBox" @tap.native="ontabSel($event, { i: index })" :data-i="index">
						<P :class="'f14 ' + (item.show ? 'c10' : 'c6b')" class="tabsName">{{ item.name }}</P>
						<image class="down ml8" referrerPolicy='no-referrer'
							:src="item.show ? 'https://wx.xtwaixie.com/img/down1.png' : 'https://wx.xtwaixie.com/img/down.png'" />
					</li>
				</block>
			</ul>
		</view>
		<view class="list">
			<view v-if="list && list.length!=0">
				<view style="height: 80rpx;"></view>
				<view class="quotationBox" v-for="(item,index) in list" :key="index" @click="gonext(item)">
					<view class="quotationinnerBox" :class="{gray:item.is_end == 1 || item.is_deal == 1}">
						<view class="quotationinnerBoxL">
							<view class="title">
								{{item.spare_parts_name}}
							</view>
							<view class="address">
								<image src="../..https://wx.xtwaixie.com/img/dq.png" mode=""></image>
								<text>{{item.province}}</text>
								<text>{{item.city}}</text>
								<view class="Line" v-if="item.parts_piece"></view>
								<view class="" v-if="item.parts_piece">
									{{ item.parts_count >= 2 ? '采购' + item.parts_count + '种' : '共' + item.count + item.parts_piece }}
									<!-- 共700000件 -->
								</view>
							</view>
							<view class="time">
								联系时间：{{item.time}}
							</view>
						</view>
						<view class="img72 pr">
							<image src="../../static/none.png" mode="aspectFit" class="img72"
								v-if="item.drawing.length == 0" style="vertical-align: bottom;">
							</image>
							<image referrerPolicy='no-referrer' :src="getImgSrc(item.drawing[0])" mode="aspectFill"
								class="img72" v-else style="vertical-align: bottom;"></image>
							<p class="bj" v-if="item.is_deal == 1" :class="{gray:item.is_end == 1 || item.is_deal == 1}">已完成
							</p>
							<p class="bj" v-else-if="item.is_end == 2">报价中</p>
							<p class="bj" v-else :class="{gray:item.is_end == 1 || item.is_deal == 1}">已完成</p>
							<image class="yjs" mode="widthFix"
								src="https://cdn.xtwaixie.com/uploads/20240415/1713167495661cdc8768cb9.png"
								style="left: -100%;width: 140rpx;top: 50%;transform: translateY(-50%);filter: none !important;"
								v-if="item.is_deal == 1 || item.is_end == 1"></image>
						
						</view>
					</view>
				</view>
			</view>
			<view class="df jc mt30" v-else style="flex-direction: column;align-items: center;">
				<image src="https://wx.xtwaixie.com/img/empty.png" style="width: 250rpx;" mode="widthFix"></image>
				<view class=""
					style="font-weight: bold;font-size: 32rpx;margin-top: 50rpx;margin-bottom:20rpx;color: #6b758c;">
					暂无联系记录
				</view>
			</view>
		</view>
		<!-- <van-popup :show="tab_list[0].show" round position="bottom">
			<van-datetime-picker type="date" :value="maxDate" :min-date="minDate" :max-date="maxDate" @confirm='input($event,0)'
				@cancel='cancel' title='开始时间' />
		</van-popup> -->
		<van-popup :show="tab_list[0].show" round position="bottom">
			<van-datetime-picker type="date" :value="maxDate" :min-date="minDate" :max-date="maxDate" @confirm='input($event,0)'
				@cancel='cancel' title='发布日期' />
		</van-popup>
		<van-popup :show="showsecondTime" round position="bottom">
			<van-datetime-picker type="date" :value="currentDates" :min-date="minDates" :max-date="maxDate"   @confirm='input($event,1)'
				@cancel='cancel' title='截止时间' />
		</van-popup>

		<van-popup :show="tab_list[1].show" @close="onClose" position="top">
			<view class="">
				<ul class="df ac bgcf bbf1">
					<block v-for="(item, index) in tab_list" :key="index">
						
						<li class="df ac jc h44 w50 tabsBox" @tap.native="ontabSel($event, { i: index })"
							:data-i="index">
							<P :class="'f14 ' + (item.show ? 'c10' : 'c6b')" class="tabsName">{{ item.name }}</P>
							<image class="down ml8" referrerPolicy='no-referrer'
								:src="item.show ? 'https://wx.xtwaixie.com/img/down1.png' : 'https://wx.xtwaixie.com/img/down.png'" />
						</li>
					</block>
				</ul>
				<view class="df">
					<scroll-view class="h360 w125 bgcf7" :scroll-y="true">
						<ul class="db">
							<block v-for="(item, index) in province_list" :key="index">
								<li :class="'tab-left ' + (region[0].act === item.region_id ? 'bgcf' : '')"
									@tap.native="onRegion($event, { name: item.region_name, id: item.region_id, type: 0 })"
									:data-name="item.region_name" :data-id="item.region_id" :data-type="0">
									<p :class="'f14 c28 ovh w110 ' + (region[0].act === item.region_id ? 'c10' : '')">
										{{ item.region_name }}
									</p>
								</li>
							</block>
						</ul>
					</scroll-view>
					<scroll-view class="h360 f1" :scroll-y="true">
						<ul class="db">
							<block v-for="(item, index) in city_list" :key="index">
								<li class="pd015 h48 df ac sb"
									@tap.native="onRegion($event, { name: item.region_name, id: item.region_id, type: 1 })"
									:data-name="item.region_name" :data-id="item.region_id" :data-type="1">
									<p :class="'f14 c28 ' + (region[1].act === item.region_id ? 'c10' : '')">
										{{ item.region_name }}
									</p>
									<image class="sel" src="https://wx.xtwaixie.com/img/sel.png"
										v-if="region[1].act === item.region_id" />
								</li>
							</block>
						</ul>
					</scroll-view>
				</view>
			</view>
		</van-popup>
		<van-popup :show="tab_list[2].show" @close="onClose" position="top">
			<view class="">
				<ul class="df ac bgcf bbf1">
					<block v-for="(item, index) in tab_list" :key="index">
						<li class="df ac jc h44 w50 tabsBox" @tap.native="ontabSel($event, { i: index })"
							:data-i="index">
							<P :class="'f14 ' + (item.show ? 'c10' : 'c6b')" class="tabsName">{{ item.name }}</P>
							<image class="down ml8" referrerPolicy='no-referrer'
								:src="item.show ? 'https://wx.xtwaixie.com/img/down1.png' : 'https://wx.xtwaixie.com/img/down.png'" />
						</li>
					</block>
				</ul>
				<scroll-view class="h360" :scroll-y="true">
					<ul class="db">
						<block v-for="(item, index) in status_arr" :key="index">
							<li class="pd015 h48 df ac sb" @tap.native="onTabs($event, { name: item, id: index })"
								:data-name="item" :data-id="index">
								<p :class="'f14 c28 ' + (tab_list[2].name === item ? 'c10' : '')">{{ item }}</p>
								<image class="sel" src="https://wx.xtwaixie.com/img/sel.png" v-if="tab_list[2].name === item" />
							</li>
						</block>
					</ul>
				</scroll-view>
			</view>
		</van-popup>
	</view>
</template>

<script>
	const http = require('../../utils/http');
	import areaList from '../../utils/area';
	export default {
		data() {
			return {
				minDate: new Date(2022, 0, 1).getTime(),
				maxDate: new Date().getTime(),
				list:[],
				currentDates:'',
				showsecondTime:false,
				status_arr: ['所有订单', '已完成', '报价中'],
				tab_list: [{
						show: false,
						name: '联系日期',
						act: ''
					},
					{
						show: false,
						name: '地区',
						act: ''
					},
					{
						show: false,
						name: '状态',
						act: ''
					}
				],
				province_list: [],
				city_list: [],
				region: [{
						name: '',
						act: ''
					},
					{
						name: '',
						act: ''
					},
					{
						name: '',
						act: ''
					}
				],
				page:1,
				pageTotal:1,
				start_date:'',
				end_date:''
			};
		},
		onLoad() {
			this.getArea(1)
			this.getList()
		},
		onReachBottom() {
			if(this.pageTotal > this.page){
				this.page++
				this.getList();
			} else {
				uni.showToast({
					title: '没有更多了~',
					icon: 'none'
				});
			}
		},
		methods: {
			getList(){
				// http.request('user/collectList',{
				http.request('user/lookList',{
					type:2,
					page:this.page,
					pageSize:10,
					province:this.region[0].name == '全部' ? '' : this.region[0].name,
					city:this.region[1].name == '全部' ? '' : this.region[1].name,
					end_date:this.end_date,
					start_date:this.start_date,
					demand_status:this.tab_list[2].act, // 1 2
				}).then(res=>{
					// this.list = [...list]
					console.log(res.data.list.length)
					res.data.list.map(item=>{
						console.log(1)
						// item.detail.drawing = JSON.parse(item.detail.drawing) || []
						// item.detail.file = JSON.parse(item.detail.file) || []
						try{
							item.detail.drawing = JSON.parse(item.detail.drawing) || []
						} catch(e){
							console.error('parsing drawing failed:',e);
							item.detail.drawing = [];
						}
						try{
							item.detail.file = JSON.parse(item.detail.file) || []
						} catch(e){
							console.error('parsing file failed:',e);
							item.detail.file = [];
						}
						
						// item.is_end = 
						item.detail.time = item.created_at
						this.list.push({...item.detail})
					})
					this.pageTotal = this.calculateTotalPages(res.data.total,10)
					// console.log(this.list)
				}).catch(err=>{
					console.log('error',err)
				})
			},
			calculateTotalPages(total,itemsPerPage){
				return Math.ceil(total / itemsPerPage);
			},
			gonext(item) {
				
				uni.navigateTo({
					url: '/pages/demand/demandDetails?id=' + item.id
				})
				// let that = this
				// uni.requestSubscribeMessage({
				// 	tmplIds: ['5SQbIg20NgfTt5-y7GY8BRzxqvrinsp-GnKzQIPcNPo'],
				// 	complete(res) {
				// 		uni.navigateTo({
				// 			url: `/pages/quotationDetail/quotationDetail?type=supplier&id=${item.demand_id}&quotationId=${item.id}&topId=${that.list[that.choosed].id}`
				// 		})
				// 	}
				// })
				
			},
			changeDate(e) {
				// this.tab_list[0].name = `${e[0]}~${e[1]}`
				// this.start_date = e[0]
				// this.end_date = e[1]
				// this.page = 1
				// this.list = []
				// this.getList();
			},
			input(e, i) {
				var date = new Date(e.detail); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				var Y = date.getFullYear() + '-';
				var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
				var D = date.getDate();
				if (i === 0) {
					this.currentDates = e.detail
					this.minDates = e.detail
					this.start_date =  Y + M + D
					this.setData({
						[`tab_list[0].show`]: false,
					});
					this.showsecondTime = true
				} else {
					this.showsecondTime = false
					this.end_date = Y + M + D
					this.setData({
						[`tab_list[0].name`] :this.start_date + '~' + this.end_date
					});
					this.page = 1
					this.list = []
					this.getList()
					
				}
			},
			ontabSel(e, _dataset) {
				/* ---处理dataset begin--- */
				this.handleDataset(e, _dataset);
				/* ---处理dataset end--- */
				let i = e.currentTarget.dataset.i;
				let status = this.tab_list[i].show;
				// this.setData({
				// 	[`tab_list[0].show`]: false,
				// 	[`tab_list[1].show`]: false,
				// 	// [`tab_list[2].show`]: false,
				// 	[`tab_list[${i}].show`]: !status,
				// 	act: i
				// });
				this.tab_list.map((item,index)=>{
					item.show = false
					if(i == index){
						item.show = true
					}
					return item
				})
				this.act = i
				console.log(this.tab_list[i])
			},
			onTabs(e, _dataset) {
				/* ---处理dataset begin--- */
				this.handleDataset(e, _dataset);
				/* ---处理dataset end--- */
				let name = e.currentTarget.dataset.name;
				let id = e.currentTarget.dataset.id;
				let act = this.act;
				this.setData({
					[`tab_list[${act}].name`]: name,
					[`tab_list[${act}].act`]: name === '已完成' ? 2 : name === '报价中' ? 1 : '',
					list: [],
					page: 1
				});
				this.getList();
				this.onClose();
			},
			getArea(id) {
				let data = {
					pid: id
				};
				http.request('base/region', data)
					.then((res) => {
						if (id === 1) {
							this.setData({
								province_list: res.data
							});
						} else {
							this.setData({
								city_list: res.data
							});
						}
					})
					.catch((res) => {
						uni.showToast({
							title: res.message,
							icon: 'none'
						});
					});
			},
			// 确认省市择
			onRegion(e, _dataset) {
				/* ---处理dataset begin--- */
				this.handleDataset(e, _dataset);
				/* ---处理dataset end--- */
				let name = e.currentTarget.dataset.name;
				let id = e.currentTarget.dataset.id;
				let type = e.currentTarget.dataset.type;
				this.region[type].name = name
				this.region[type].act = id
				if (type == 0) {
					this.getArea(id);
				} else if (type == 1) {
					console.log(id);
					this.setData({
						page: 1,
						list: [],
						[`tab_list[1].name`]: id > 0 ? name : this.region[0].name
					});
					this.onClose();
					this.getList();
				}
			},
			onClose() {
				this.setData({
					show: false,
					[`tab_list[0].show`]: false,
					[`tab_list[1].show`]: false,
					[`tab_list[2].show`]: false
				});
			},
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #F7F8FC;
	}
	.list{
		// padding: 0rpx;
		.quotationBox {
			width: 700rpx;
			box-sizing: border-box;
			margin: 20rpx auto;
			background-color: #FFF;
			padding: 25rpx 30rpx;
			border-radius: 20rpx;
		
			.quotationinnerBox {
				display: flex;
				justify-content: space-between;
				align-items: center;
		
				.quotationinnerBoxL {
					display: flex;
					flex-direction: column;
					justify-content: space-around;
					width: 500rpx;
		
					image {
						width: 30rpx;
						height: 30rpx;
						margin-right: 10rpx;
					}
		
					text {
						margin-right: 10rpx;
					}
		
					.title {
						overflow: hidden;
						/*   超出容器的部分影响  */
						white-space: nowrap;
						/*  文本不换行   */
						text-overflow: ellipsis;
						/*  超出容器的文本显示省略号  */
						font-size: 28rpx;
						font-weight: bold;
						margin-bottom: 16rpx;
					}
		
					.address {
						display: flex;
						align-items: center;
						font-size: 24rpx;
						color: #60646E;
						margin-bottom: 16rpx;
		
						view {
							color: #1A4FBF;
						}
					}
		
					.time {
						font-size: 24rpx;
						color: #60646E;
					}
		
					.Line {
						height: 26rpx;
						width: 2rpx;
						margin: 0 20rpx 0 10rpx;
						background-color: #c4c4c4;
					}
		
				}
		
				.quotationinnerBoxR {
					position: relative;
		
					image {
						width: 180rpx;
						height: 180rpx;
						border-radius: 30rpx;
						display: block;
					}
		
					view {
						background: #6CC02A;
						position: absolute;
						bottom: 0;
						left: 0;
						width: 180rpx;
						color: #FFF;
						font-size: 30rpx;
						line-height: 50rpx;
						text-align: center;
						border-bottom-left-radius: 30rpx;
						border-bottom-right-radius: 30rpx;
					}
				}
			}
		}
	}
	.tab-left {
		padding-left: 40rpx;
		line-height: 96rpx;
		font-size: 28rpx;
		color: #6b758c;
		display: block;
	}

	.tabsBox {
		width: calc(100% / 3);
	}

	.tabsName {
		overflow: hidden;
		/*   超出容器的部分影响  */
		white-space: nowrap;
		/*  文本不换行   */
		text-overflow: ellipsis;
		/*  超出容器的文本显示省略号  */
	}
</style>